<template>
  <div class="">
    <h2 class="">{{name}}</h2>
    <div style="display: grid; grid-template-columns: 272px auto">
      <div>
        <Avatar shape="square" style="width:256px;height:256px;margin: 8px" :src="img"></Avatar>
      </div>
      <div style="padding: 20px">
        <Divider orientation="left">Summary</Divider>
        <p>{{summary}}</p>
        <Divider orientation="left">Size</Divider>
        <div>
          <RadioGroup v-model="selectedSize" type="button">
            <Radio v-for="(s, idx) in size" :label="s" :key="idx"></Radio>
          </RadioGroup>
        </div>
        <Divider orientation="left">Color</Divider>
        <div>
          <RadioGroup v-model="selectedColor" type="button">
            <Radio v-for="(c, idx) in color" :label="c" :key="idx"></Radio>
          </RadioGroup>
        </div>
        <Divider orientation="left">Buy now</Divider>
        <div>
          <Form inline>
            <FormItem prop="num">
              <Input style="width:100px" type="number" step="1" min="1" v-model="num">
                <Icon slot="prepend" type="md-remove" @click="updateNum(-1)"></Icon>
                <Icon slot="append" type="md-add" @click="updateNum(1)"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="addToCart" :disabled="canAddToCart">加入购物车</Button>
            </FormItem>
          </Form>

        </div>
      </div>
    </div>
    <div class="">
      <Tabs value="desc">
        <TabPane label="规格详情" name="desc">
          <p>{{desc}}</p>
        </TabPane>
        <TabPane label="评论" name="comment">
          <Alert type="success" v-for="(comment, idx) in comments" :key="idx">
            {{comment.username}} -- {{toTime(comment.timestamp)}}
            <div slot="desc">{{comment.content}}</div>
          </Alert>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex'
export default {
  name: 'detail',
  props: [
    'id'
  ],
  data: () => {
    return {
      name: '',
      size: [],
      color: [],
      price: 0,
      summary: '',
      img: '',
      cate: '',
      comments: [],
      desc: '',
      num: 1,
      selectedSize: null,
      selectedColor: null
    }
  },
  computed: {
    canAddToCart () {
      return !this.selectedSize || !this.selectedColor
    }
  },
  methods: {
    // don't messed up mutations and actions
    ...mapMutations('mall/', ['addCart']),
    ...mapActions('mall/', ['getGoodDetails']),
    toTime (timestamp) {
      let d = new Date(timestamp * 1000)
      return `${d.getFullYear()}-${(1 + d.getMonth())}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
    },
    updateNum (num) {
      this.num += num
      if (this.num < 1) {
        this.num = 1
      }
    },
    addToCart () {
      this.addCart({
        id: this.id,
        num: this.num,
        details: {
          size: this.selectedSize,
          color: this.selectedColor
        }
      })
    }
  },
  mounted () {
    this.getGoodDetails(this.id).then(data => {
      console.log(data)
      this.name = data.name
      this.size = data.size
      this.color = data.color
      this.price = data.price
      this.summary = data.summary
      this.img = data.img
      this.cate = data.cate
      this.comments = data.comment
      this.desc = data.desc
    })
  }
}
</script>

<style scoped>

</style>
